<template>
	<div class="thePage flex-column">
		<div class="header">
			<div class="pg-title-dark">实习反馈</div>
			<div class="serachKeywords flex-between">
				<cube-input class="flex-1" v-model="keywords" placeholder="输入要查询的姓名或学号"></cube-input>
				<i class="iconfont icon-sousuotianchong"></i>			
			</div>		
			
			<cube-tab-bar v-model="curTabIndex">
				<cube-tab v-for="(item, i) in tabs" :value="i" :key="i" :label="i">
					<div class="text">{{ item }}</div>
					<div class="icon flex-center mt8"></div>
				</cube-tab>
			</cube-tab-bar>	
		</div>		
			
		<div class="scroll overflow-y flex-1">	
		<cube-tab-panels v-model="curTabIndex">
			<cube-tab-panel  :value="curTabIndex" :label="curTabIndex" >
				<div class="list">					
					<div class="item-box flex-column" v-for="(item, i) in list(curTabIndex)" :key="i" @click="onEdit(item)">
						<div class="flex-between">
								<div class="item-left flex-column flex-center ">
									<img class="avatar" :src="item.avatar || defaultAvatar"></img>
									<div>
										{{item.name}}
									</div>
									<div>
										{{item.number}}
									</div>
								</div>
								<div class="item-right flex-column flex-1">
									<div>
										{{item.college + item.class}} 
									</div>
									<div>
										岗位：{{item.post}}
									</div>
									<div class="entTel">
										联系电话：{{item.entTel}}<i class="iconfont icon-dianhua"></i>
									</div>
									<div >
										实习开始时间：{{item.dtBegin}}
									</div>
									<div>
										实习结束时间：{{item.dtEnd}}
									</div>
								</div>
							</div>
							<div class="remark b-top-half" v-show="item.remark">
								评价：{{item.remark}}
							</div>						
					</div>
				</div>	
			</cube-tab-panel>			
		</cube-tab-panels>		
		</div>	
	</div>
</template>

<script>
export default {
	name: 'FeedbackList',
	data() {
		return {
			defaultAvatar:require("@/pics/default_avatar.png"),			
			keywords: '',
			curTabIndex: 0,
			tabs: ['未评价', '已评价'],	
			listData: [
				{
					name: '王某1',
					number: '2018080101',
					avatar: '',
					college: '信息学院',
					class: '18数媒四',
					post: 'ui设计师',
					entTel: '15158900366',
					dtBegin: '2020.07.01',
					dtEnd: '2020.12.31',
					remark: '',
					status: '0' // 0未评价、1已评价
				},
				{
					name: '王某2',
					number: '2018080101',
					avatar: '',
					college: '信息学院',
					class: '18数媒四',
					post: 'ui设计师',
					entTel: '15158900366',
					dtBegin: '2020.07.01',
					dtEnd: '2020.12.31',
					remark: '',
					status: '0' // 0未评价、1已评价
				},
				{
					name: '王某3',
					number: '2018080101',
					avatar: '',
					college: '信息学院',
					class: '18数媒四',
					post: 'ui设计师',
					entTel: '15158900366',
					dtBegin: '2020.07.01',
					dtEnd: '2020.12.31',
					remark: '',
					status: '0' // 0未评价、1已评价
				},
				{
					name: '王某4',
					number: '2018080101',
					avatar: '',
					college: '信息学院',
					class: '18数媒四',
					post: 'ui设计师',
					entTel: '15158900366',
					dtBegin: '2020.07.01',
					dtEnd: '2020.12.31',
					remark: '该学生在我公司实习期间表现良好，无迟到早退现象，工作积极，认真。',
					status: '1' // 0未评价、1已评价
				},
				{
					name: '王某5',
					number: '2018080101',
					avatar: '',
					college: '信息学院',
					class: '18数媒四',
					post: 'ui设计师',
					entTel: '15158900366',
					dtBegin: '2020.07.01',
					dtEnd: '2020.12.31',
					remark: '该学生在我公司实习期间表现良好，无迟到早退现象，工作积极，认真。',
					status: '1' // 0未评价、1已评价
				},
				{
					name: '王某6',
					number: '2018080101',
					avatar: '',
					college: '信息学院',
					class: '18数媒四',
					post: 'ui设计师',
					entTel: '15158900366',
					dtBegin: '2020.07.01',
					dtEnd: '2020.12.31',
					remark: '该学生在我公司实习期间表现良好，无迟到早退现象，工作积极，认真。',
					status: '1' // 0未评价、1已评价
				},
				{
					name: '王某7',
					number: '2018080101',
					avatar: '',
					college: '信息学院',
					class: '18数媒四',
					post: 'ui设计师',
					entTel: '15158900366',
					dtBegin: '2020.07.01',
					dtEnd: '2020.12.31',
					remark: '该学生在我公司实习期间表现良好，无迟到早退现象，工作积极，认真。',
					status: '1' // 0未评价、1已评价
				},
				{
					name: '王某8',
					number: '2018080101',
					avatar: '',
					college: '信息学院',
					class: '18数媒四',
					post: 'ui设计师',
					entTel: '15158900366',
					dtBegin: '2020.07.01',
					dtEnd: '2020.12.31',
					remark: '',
					status: '0' // 0未评价、1已评价
				}
			],			
		};
	},
	
	computed:{
		
	},
	methods: {
		list(status){
			return this.listData.filter(item=>item.status == status)
		},
		onEdit() {
			this.$router.push({ name: 'feedbackEdit' });
		}
	}
};
</script>

<style lang="less" scoped>
.header{
	height:180px;
}
.list {
	position: relative;
	margin: auto 10px;
	// height: 533px;	
}

.cube-tab-bar{
	margin: 0 30px;
	align-items: flex-start;
	font-size: 20px;
	border-bottom: 1px solid lightgray;
	.cube-tab{
		padding: 0;
		.text{
			color: #959595;
		}		
	}
	.cube-tab_active {		
		.text{
			color: #3A3A3A;
		}
		.icon{
			position: relative;	
			&::after {
				position: absolute;
				top: -2px;
				left: 50% -35px ;
				content: '';
				width: 70px;
				height: 6px;
				background: #fd8a23;
				border-radius: 3px;	
			}
		}
	}
}
	
.scroll{
	margin-bottom: 20px ;
}

.item-left{
	padding: 0 10px;
	font-size: 12px;
}
.item-right{	
	padding: 0 20px;
	font-size: 13px;		
}

.remark {
	padding: 10px;
	font-size: 14px;				
	font-weight: 500;
	color: #FE921E;
}
</style>
